// 社会组织相关数据汇总
<template>
  <Modal v-on:hidden="$emit('hidden')">
    <div class="rectangle flex AlignItemsFE">
      <!-- 弹窗点击关闭事件 -->
      <p><img src="../../../assets/img/components/06.png" alt="" class="imgBtn_close" @click="$emit('hidden')"></p>
      <!-- 内容 -->
      <div class="modal_box flexC AlignItemsC JustifyContentC">
        <!-- 上部分内容 -->
        <div class="bigBox flex AlignItemsC JustifyContentSA" style="margin-bottom: 2rem;">
          <div class="content_left flexC">
            <!-- 小标题 -->
            <div class="flex AlignItemsC">
              <p style="width:0.325rem; height: 1.425rem; background:rgba(241,255,82,1);margin: 0 0.625rem;"></p>
              <p class="font_s20 weightBold">社会组织基础数量</p>
            </div>
            <!-- 小内容 -->
            <div class="flex flex1 JustifyContentSA AlignItemsC content_container">
              <p class="top_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #BADEFF;">2325</span>
                <span class="font_s18">社会组织总数</span>
              </p>
              <p class="top_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #BADEFF;">1885</span>
                <span class="font_s18">民非</span>
              </p>
              <p class="top_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #BADEFF;">1315</span>
                <span class="font_s18">双重管理</span>
              </p>
              <p class="top_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #BADEFF;">436</span>
                <span class="font_s18">社会团体总数</span>
              </p>
              <p class="top_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #BADEFF;">4</span>
                <span class="font_s18">基金会</span>
              </p>
              <p class="top_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #BADEFF;">1010</span>
                <span class="font_s18">直接登记</span>
              </p>
            </div>
          </div>
          <div class="content_center flexC">
            <!-- 小标题 -->
            <div class="flex AlignItemsC">
              <p style="width:0.325rem; height: 1.425rem; background:rgba(241,255,82,1);margin: 0 0.625rem;"></p>
              <p class="font_s20 weightBold">行业人员情况</p>
            </div>
            <!-- 小内容 -->
            <div class="flex flex1 JustifyContentSA AlignItemsC content_container">
              <p class="top_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #BADEFF;">5296</span>
                <span class="font_s18">负责人总数</span>
              </p>
              <p class="top_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #BADEFF;">2312</span>
                <span class="font_s18">女性负责人数</span>
              </p>
              <p class="top_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #BADEFF;">2984</span>
                <span class="font_s18">男性负责人数</span>
              </p>
              <p class="top_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #BADEFF;">65135</span>
                <span class="font_s18">从业人员总数</span>
              </p>
              <p class="top_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #BADEFF;">14596</span>
                <span class="font_s18">理事总人数</span>
              </p>
              <p class="top_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #BADEFF;">1787</span>
                <span class="font_s18">监事总人数</span>
              </p>
            </div>
          </div>
          <div class="content_right flexC">
            <!-- 小标题 -->
            <div class="flex AlignItemsC">
              <p style="width:0.325rem; height: 1.425rem; margin: 0 0.625rem;"></p>
              <!-- <p style="width:0.325rem; height: 1.425rem; background:rgba(241,255,82,1);margin: 0 0.625rem;"></p> -->
              <!-- <p class="font_s20 weightBold">社会组织基础数量</p> -->
            </div>
            <!-- 小内容 -->
            <div class="flex flex1 JustifyContentSA AlignItemsC content_container">
              <p class="top_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #BADEFF;">988</span>
                <span class="font_s18">法人专职</span>
              </p>
              <p class="top_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #BADEFF;">1054</span>
                <span class="font_s18">法人兼职</span>
              </p>
            </div>
          </div>
        </div>
        <!-- 下部分内容 -->
        <div class="bigBox flex AlignItemsC JustifyContentSA" style="margin-bottom: 5rem;">
          <div class="content_left flexC">
            <!-- 小标题 -->
            <div class="flex AlignItemsC">
              <p style="width:0.325rem; height: 1.425rem; background:rgba(241,255,82,1);margin: 0 0.625rem;"></p>
              <p class="font_s20 weightBold">社会组织经济运行情况（2017年度）</p>
            </div>
            <!-- 小内容 -->
            <div class="flex flex1 JustifyContentSA AlignItemsC content_container">
              <p class="bottom_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #439AFF;">8.2亿元</span>
                <span class="font_s18">注册资金总数</span>
              </p>
              <p class="bottom_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #439AFF;">85.49亿元</span>
                <span class="font_s18">年度收入总合</span>
              </p>
              <p class="bottom_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #439AFF;">82.1亿元</span>
                <span class="font_s18">年度支出总合</span>
              </p>
              <p class="bottom_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #439AFF;">29.43亿元</span>
                <span class="font_s18">年末净资产总合</span>
              </p>
              <p class="bottom_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #439AFF;">1.64亿元</span>
                <span class="font_s18">年度缴税总额</span>
              </p>
              <p class="bottom_box flexC JustifyContentSA AlignItemsC" style="background: none;border: none;">
                <!-- <span class="font_s40 weightBold" style="color: #439AFF;">1010</span> -->
                <!-- <span class="font_s18">直接登记</span> -->
              </p>
            </div>
          </div>
          <div class="content_center flexC">
            <!-- 小标题 -->
            <div class="flex AlignItemsC">
              <p style="width:0.325rem; height: 1.425rem; background:rgba(241,255,82,1);margin: 0 0.625rem;"></p>
              <p class="font_s20 weightBold">社区社会组织发展</p>
            </div>
            <!-- 小内容 -->
            <div class="flex flex1 JustifyContentSA AlignItemsC content_container">
              <p class="bottom_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #439AFF;">582</span>
                <span class="font_s18">社区社会组织</span>
              </p>
              <p class="bottom_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #439AFF;">365</span>
                <span class="font_s18">社区公益慈善类</span>
              </p>
              <p class="bottom_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #439AFF;">61</span>
                <span class="font_s18">社区专业调处类</span>
              </p>
              <p class="bottom_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #439AFF;">110</span>
                <span class="font_s18">社区生活服务类</span>
              </p>
              <p class="bottom_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #439AFF;">46</span>
                <span class="font_s18">社区文体活动类</span>
              </p>
              <p class="bottom_box flexC JustifyContentSA AlignItemsC" style="background: none;border: none;">
                <!-- <span class="font_s40 weightBold" style="color: #439AFF;">1787</span>
                <span class="font_s18">监事总人数</span> -->
              </p>
            </div>
          </div>
          <div class="content_right flexC">
            <!-- 小标题 -->
            <div class="flex AlignItemsC">
              <p style="width:0.325rem; height: 1.425rem; background:rgba(241,255,82,1);margin: 0 0.625rem;"></p>
              <p class="font_s20 weightBold">慈善组织</p>
            </div>
            <!-- 小内容 -->
            <div class="flex flex1 JustifyContentSA AlignItemsC content_container">
              <p class="bottom_box flexC JustifyContentSA AlignItemsC">
                <span class="font_s40 weightBold" style="color: #439AFF;">7</span>
                <span class="font_s18">已认定慈善组织</span>
              </p>
              <p class="bottom_box flexC JustifyContentSA AlignItemsC" style="background: none;border: none;">
                <!-- <span class="font_s40 weightBold" style="color: #439AFF;">1054</span>
                <span class="font_s18">法人兼职</span> -->
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Modal>
</template>
<script>
// import Modal from '../../../components/Modal'
import Modal from '@/components/Modal.vue'
export default {
  components: {
    Modal
  }
}
</script>
<style lang="scss" scoped>
.rectangle{
  width: 90%;
  height: 90%;
  position: absolute;
  top: 5%;
  left: 5%;
  background: url(../../../assets/img/components/09.png) no-repeat;
  background-size: 100% 100%;
  .imgBtn_close {
    cursor: pointer;
    position: absolute;
    top:3.2%;
    right: 2.2%;
    z-index: 99;
  }
  .modal_box{
    width: 100%;
    height: 90%;
    box-sizing: border-box;
    .bigBox {
      width: 85%;
      height: 40%;
      .content_left {
        width: 40%;
        height: 85%;
      }
      .content_center {
        width: 40%;
        height: 85%;
      }
      .content_right {
        width: 15%;
        height: 85%;
      }
      .top_box {
        width: 11.125rem;
        height: 6.45rem;
        background:linear-gradient(180deg,rgb(21, 24, 67),rgb(50, 67, 121));
        border:1px solid rgb(163, 91, 137);
        border-radius:4px;
        padding: 0.725rem 0;
        box-sizing: border-box;
      }
      .bottom_box {
        width: 11.125rem;
        height: 6.45rem;
        background: url(../../../assets/img/data/28.png) no-repeat;
        background-size: 100% 100%;
        padding: 0.725rem 0;
        box-sizing: border-box;
        // background:linear-gradient(-38deg,rgba(98,141,214,1),rgba(98,141,214,0));
        // border:1px solid rgba(67, 154, 255, 1);
        // border-radius:4px;
      }
      .content_container {
        flex-wrap: wrap;
        padding: 0.625rem 0;
      }
    }
  }
}
</style>
